﻿@page "/buttons/checkbox"

@using Syncfusion.Blazor.Buttons

@inherits SampleBaseComponent

<SampleDescription>
   <p> This sample demonstrates the default functionalities of the Checkbox component. Click the Checkbox element to toggle states between checked/unchecked.</p>
</SampleDescription>
<ActionDescription>
    <p>The <code>Checkbox</code> is a graphical user interface element that allows to select one or more options from the choices. It contains checked, unchecked, and indeterminate states.</p>
    <p>In this sample, checked state is achieved by using the
        <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfInputBase-1.html#Syncfusion_Blazor_Buttons_SfInputBase_1_Checked'>
        Checked</a> 
        property, indeterminate state is achieved by using the <a target = '_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfCheckBox-1.html#Syncfusion_Blazor_Buttons_SfCheckBox_1_Indeterminate'>
        Indeterminate</a> property, and disabled state is achieved by using the <a target='_blank' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfInputBase-1.html#Syncfusion_Blazor_Buttons_SfInputBase_1_Disabled'>
        Disabled</a> property.
    </p>
    <p>More information about Blazor Checkbox component can be found in this <a target=""_blank"" href="https://blazor.syncfusion.com/documentation/check-box/getting-started/">documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <div class="checkbox-control">
        <div class="row">
            <SfCheckBox @bind-Checked="@isChecked">Checkbox: @isChecked</SfCheckBox>
        </div>
        <div class="row">
            <SfCheckBox Disabled="true" @bind-Checked="@isDisabledChecked" Label="Checked, Disabled"></SfCheckBox>
        </div>
        <div class="row">
            <SfCheckBox Indeterminate="true" Disabled="true" Label="Indeterminate, Disabled" TChecked="bool"></SfCheckBox>
        </div>
    </div>
</div>
@code {
    private bool isChecked = true;
    private bool isDisabledChecked = true;
}
<style>
    .checkbox-control {
        margin: 12% 0 12% 40%;
    }

    @@media only screen and (max-width: 700px) {
        .checkbox-control {
            margin: 20% 0 0 32%;
        }

        .control-section {
            min-height: 200px;
        }
    }

    @@media only screen and (max-width: 500px) {
        .control-section {
            min-height: 200px;
        }

        .checkbox-control {
            margin-top: 27%;
            margin-left: 20%;
            margin-bottom: 27%;
        }
    }

    .control-section .row {
        margin: 20px 0;
    }
</style>
